<template>
  <div class="midia-forward" v-show="showWholePage">
    <div v-if="!isFormSuccess">
      <Carousel :text="scrollText" :goldenNotice="true" bgColor="#fff" color="#777"></Carousel>
    </div>
    <div class="banner-box">
      <h4 :style="{'font-size':titleFontSize}">年度中国{{catName}}</h4>
      <img src="./assets/media-title.png" class="media-title" alt="">
      <div class="apply-btn-box" v-if="!isFormSuccess">
        <router-link :to="'/applyReward/no?from=end&catid='+catid" class="btn">免费申请奖牌证书</router-link>
        <button class="btn generate-btn">生成榜单海报</button>
      </div>
      <p>{{description}}</p>
      <img :src="yearPic" alt="" class="year-bg">
    </div>
    <div class="top-three" v-show="topThreeList.length > 0">
      <div class="title-box">
        <img src="./assets/media-title-left.png" alt="">
        <span>{{caption1}}</span>
        <img src="./assets/media-title-right.png" alt="">
      </div>
      <MediaCard v-for="(item, index) in topThreeList" :key="index" :item="item" />
    </div>
    <div class="three-ten" v-show="threeTenList.length > 0">
      <div class="title-box">
        <img src="./assets/media-title-left.png" alt="">
        <span>{{caption2}}</span>
        <img src="./assets/media-title-right.png" alt="">
      </div>
      <MediaCard v-for="(item, index) in threeTenList" :key="index" :item="item" />
    </div>
    <div class="send-read" v-if="mediaList.length > 0">
      <p>送阅媒体：</p>
      <div class="line">
        <div class="title-line"></div>
      </div>
      <div class="midia-name">
        <a :href="item[1]" v-for="(item, index) in mediaList" :key="index">{{item[0]}}</a>
      </div>
    </div>
    <MyFooter :isBlack="true" />
    <div class="show-menu" @click="onShowMenu" v-if="!isFormSuccess" v-show="menuBtn">
      <img src="../../assets/img/menu-btn.png" alt="">
    </div>
    <VoteMenu v-if="showMenu" @closeMenu="onCloseMenu" :cstatus="status"></VoteMenu>
    <div class="bottom-btn home-btn" @click="onHome" v-if="showHomeBtn && isWeiXin">
      <img src="../index/assets/home.png" alt="">
      <span>首页</span>
    </div>
    <!-- <vodal :width="100" :height="100" measure="%" :show="true" :closeButton="false">
      <div></div>
    </vodal> -->
  </div>
</template>
<script>
import Carousel from '../../components/Carousel'
import MediaCard from './components/MediaCard'
import MyFooter from '../../components/MyFooter'
import setTitle from '../../common/setTitle'
import VoteMenu from '../../components/VoteMenu'
import scroll from '../../mixins/scroll'
import * as events from '../../store/events'
import * as auth from '../../common/auth'
import { mapState } from 'vuex'
export default {
  mixins: [scroll],
  components: {
    Carousel,
    MediaCard,
    MyFooter,
    VoteMenu
  },
  data() {
    return {
      catid: '',
      showMenu: false,
      catName: '',
      year: '',
      yearPic: '',
      description: '【榜单名】是由品牌中网主办的全网规模最大、范围最广、最具权威性的行业十大品牌民意调查活动。此次活动秉承透明公开性原则，设立监测监督机构，进行全时段监控，将多渠道数据调研、全网民意调查、各大媒体跟踪报道进行多维度整合、透析，最终产生真实性、时效性、公正性的行业最具实力、最具人气十大品牌。活动创办以来，受到了新浪、网易、头条、搜狐等几十家知名媒体高度关注。此次活动，联合各大媒体同步报道，为各大行业口碑人气品牌凝聚人气，提高品牌影响力和知名度。 荣登【榜单名】榜单的优秀品牌如下：',
      mediaList: [],
      topThreeList: [],
      threeTenList: [],
      menuBtn: true,
      caption1: '',
      caption2: '',
      scrollText: '',
      // 是否显示返回首页按钮
      showHomeBtn: false,
      // 控制整页是否显示 防止来回跳页时候屏幕闪动
      showWholePage: false,
      pageform: this.$route.query.pageform
    }
  },
  computed: {
    ...mapState({
      status: s => s.categoryStatus
    }),
    titleFontSize() {
      let fz = 62
      if (this.catName.length < 4) {
        fz = 62
      } else if (this.catName.length < 10) {
        fz = -1 * this.catName.length + 51
      } else {
        fz = 30
      }
      return fz / 100 + 'rem'
    },
    isFormSuccess() {
      if (this.pageform === 'successfulCase') {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.isWeiXin = this.$getDeviceInfo().isWeiXin
    window.sessionStorage.setItem('fromIndex', true)
    this.$showLoading()
    // 非成功案例详情页  需要登录
    if (!this.isFormSuccess) {
      // 登录
      auth.login(this.$route).then(() => {
        // 检查是否被封号
        auth.check(this.$route).then(() => {
          this.catid = this.$route.query.catid || this.$router.params.catid
          this.getStatus() // 获取当前行业投票状态
        }).catch((msg) => {
          this.$hideLoading()
          if (msg) {
            this.$toast.center(msg)
          }
        })
      }).catch(() => { })
    } else {
      this.catid = this.$route.query.successCatid
      this.getStatus() // 获取当前行业投票状态
    }
  },
  methods: {
    // 获取当前行业投票状态
    getStatus() {
      if (!this.status) {
        this.$api.getCategoryStatus(this.catid).then(data => {
          this.$store.commit(events.SET_CATE_STATUS, parseInt(data.data.category_status || data.data.status))
          this.$store.commit(events.SET_PAGE_SWITCH, parseInt(data.data.page_switch))
          this.gotStatus(this.status)
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.gotStatus(this.status)
      }
    },
    gotStatus(status) {
      if (status === 40002) { // catid不正确 跳转到该页面
        this.$router.replace('/catidNotRightPage')
        return
      } else if ((status !== 5 || !this.isWeiXin) && !this.pageform) {
        this.$router.replace('/?catid=' + this.catid)
        return
      } else {
        this.showWholePage = true
        this.getBandMediaList()
      }
    },
    getBandMediaList() {
      this.$api.getBangdanList(this.catid).then(data => {
        if (data.data.status == 1) {
          this.$hideLoading()
          window.scrollTo(0, 0)
          let brandList = data.data.brandList
          this.catName = data.data.catname
          this.year = data.data.bangdan_year
          this.yearPic = data.data.year_pic
          // 标题
          setTitle(this.year + '年中国' + this.catName + '十大品牌排行')
          // catname存到store中
          this.$store.commit(events.SET_CAT_NAME, this.catName)

          // 描述
          if (data.data.description) {
            this.description = data.data.description
          }
          // 跑马灯数据
          if (data.data.rolling_text) {
            this.scrollText = data.data.rolling_text.join(' ')
          }
          // 送阅媒体
          if (data.data.media) {
            this.mediaList = data.data.media
          }
          // 标题
          this.caption1 = data.data.caption1
          this.caption2 = data.data.caption2
          // top 3
          this.topThreeList = brandList.slice(0, 3)
          // top 3
          this.threeTenList = brandList.slice(3, brandList.length)
          // 小程序存到store中AppletLink
          if (data.data.share_xcx_ewm_link) {
            this.$store.commit(events.SET_WX_APPLET_LINK, data.data.share_xcx_ewm_link)
          }
          // 微信二维码存到store中
          this.$store.commit(events.SET_WX_VOTE_LINK, data.data.share_ewm_link)
          // 客服数据
          let service = {
            qq: data.data.qq, // 客服qq号码
            wxqr: data.data.wechatqr, // 客服微信二维码
            tel: data.data.service_tel  // 客服电话
          }
          // 客服数据存到store中
          this.$store.commit(events.SET_SERVICE_INFO, service)
          // 是否显示返回首页按钮
          this.showHomeBtn = parseInt(data.data.openHomePage)
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onHome() {
      this.$router.push('/homepage?catid=' + this.catid)
    },
    // 关闭弹出菜单
    onCloseMenu() {
      this.showMenu = false
      this.menuBtn = true
      this.scroll(true)
    },
    // 显示菜单
    onShowMenu() {
      this.showMenu = true
      this.menuBtn = false
      this.scroll(false)
    }
  }
}
</script>
<style lang='scss' scoped>
.midia-forward {
  background: #f0f4f7;
  .banner-box {
    width: 100%;
    // height: 7.98rem;
    background: url("./assets/media-banner.png") center no-repeat;
    background-size: cover;
    position: relative;
    .year-bg {
      position: absolute;
      top: 0.8rem;
      left: 1.24rem;
      width: auto;
      height: 1.32rem;
    }
    h4 {
      font-size: 0.62rem;
      line-height: 0.62rem;
      font-weight: bold;
      color: rgba(193, 161, 106, 1);
      padding-top: 1.7rem;
      padding-left: 1.24rem;
    }
    .media-title {
      width: 4.32rem;
      height: 0.57rem;
      margin-left: 1.24rem;
    }
    p {
      padding: 0 0.5rem;
      margin: 0.4rem 0;
      font-size: 0.26rem;
      line-height: 0.42rem;
      color: rgba(51, 51, 51, 1);
    }
    .apply-btn-box {
      margin-top: 0.5rem;
      text-align: center;
      .btn {
        width: 3.4rem;
        // height: 0.7rem;
        border: 2px solid #d0ba53;
        border-radius: 0.1rem;
        background-color: rgba(220, 196, 89, 0.8);
        font-size: 0.34rem;
        line-height: 0.34rem;
        padding: 0.19rem 0;
        color: #fff;
      }
      .generate-btn {
        width: 2.7rem;
        color: #d5b416;
        background-color: #fff;
        margin-left: 0.1rem;
      }
    }
  }
  .top-three {
    background: linear-gradient(#ffffff, #f0f4f7);
  }
  .three-ten {
    margin-bottom: 0.36rem;
  }
  .title-box {
    padding-top: 0.5rem;
    text-align: center;
    img {
      width: 1.47rem;
      height: 0.18rem;
    }
    span {
      font-size: 0.4rem;
      font-weight: bold;
      color: rgba(193, 161, 106, 1);
      margin: 0 0.12rem;
      vertical-align: middle;
    }
  }
  .send-read {
    width: 6.42rem;
    margin: 0.38rem auto;
    font-size: 0.26rem;
    line-height: 0.46rem;
    color: rgba(51, 51, 51, 1);
    .line {
      width: 100%;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.12);
      margin: 0.14rem 0;
      position: relative;
      .title-line {
        width: 0.64rem;
        height: 2px;
        background: rgba(67, 64, 56, 1);
        position: absolute;
        top: -1px;
      }
    }
    .midia-name {
      width: 6.62rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      a {
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
